<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> 
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>  
<%@ taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">
<meta http-equiv="expires" content="0"> 
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<%@ include file="../../common/StyleEUIMobile.jsp"%>
 
<script>


var expandedRows = []; // 存储已展开的行索引或唯一标识
var dataGrid ;
$(document).ready(function(){
	
	var orderId = $("#orderId").val();

	dataGrid = $('#orderDetailsDatagrid').datagrid({
	
		url : 'ipadJSON!getPeihuoOrderById',
		queryParams: {
			'formBean.orderId':orderId,
		} ,
		fit : true,
		fitColumns: true,
		border : false,	
		singleSelect:true,
		nowrap : false,
		rownumbers : true,
		striped: true,
		columns : [ [
			{	
				field : 'productInfo',
				title : '公司货号',
				width : '25%',	
				align: 'center'
			},{
				field : 'pbId',
				title : '条码ID',			
				width : '10%',
				hidden: true
			},{	
				field : 'yearInfo',
				title : '年份',
				width : '10%',	
				align: 'center'
			},{	
				field : 'category',
				title : '货品类别',
				width : '27%',	
				align: 'center'
			},{	
				field : 'snums',
				title : '选货',
				width : '7%',	
				align: 'center',
				formatter: function(value) {
					  return '<span style="font-size: 17px;font-weight:bold;font-style:italic;">' + value + '</span>';
				}
			},{	
				field : 'nums',
				title : '配货',
				width : '7%',	
				align: 'center',
				formatter: function(value) {
					  return '<span style="font-size: 17px;font-weight:bold;font-style:italic;">' + value + '</span>';
				}
			},{	
				field : 'inventoryNums',
				title : '库存',
				width : '7%',	
				align: 'center',
				formatter: function(value) {
					  return '<span style="font-size: 17px;font-weight:bold;font-style:italic;">' + value + '</span>';
				}
			},{	
				field : 'progress',
				title : '配货率',
				width : '10%',
				formatter: function (v, r, i) {
					var htmlstr = "";
					if(v <= 60){
						 htmlstr = '<div class="easyui-progressbar progressbar easyui-fluid" style="width: 100%; height: 20px;">'
							  + '<div class="progressbar-value" style="width: '+v+'%; height: 20px; line-height: 20px; background-color:#FFC0CB;"> '
							  + '<div class="progressbar-text" style="width: ' + v+'%'+ '; height: 20px; line-height: 20px;background-color:#FFC0CB;">' + v+ '%</div>'
							  + '</div>'
							  + '</div>';
							  return htmlstr;	
					}else if(v<100 && v>60){
						 htmlstr = '<div class="easyui-progressbar progressbar easyui-fluid" style="width: 100%; height: 20px;">'
							  + '<div class="progressbar-value" style="width: '+v+'%; height: 20px; line-height: 20px; background-color:#FFDAB9;"> '
							  + '<div class="progressbar-text" style="width: ' + v+'%'+ '; height: 20px; line-height: 20px;background-color:#FFDAB9;">' + v+ '%</div>'
							  + '</div>'
							  + '</div>';
							  return htmlstr;	
					}else if(v==100){
						htmlstr = '<div class="easyui-progressbar progressbar easyui-fluid" style="width: 100%; height: 20px;">'
							  + '<div class="progressbar-value" style="width: '+v+'%; height: 20px; line-height: 20px; background-color:#90EE90;"> '
							  + '<div class="progressbar-text" style="width: ' + v+'%'+ '; height: 20px; line-height: 20px;background-color:#90EE90;">' + v+ '%</div>'
							  + '</div>'
							  + '</div>';
							  return htmlstr;	
					}
					 				 
					 }
			}]],
		 view: detailview,
		 detailFormatter: function(rowIndex, rowData){
			 return '<table border="0"><tr>' +
            				'<td rowspan=2 style="border:0"><img src="'+rowData.imgUrl+'" width="100" height="100"></td>' +
             				'<td style="border:0;width:80px;text-align:right;font-size:16px;">齐手：</td>' +
             				'<td style="border:0;width:20px;font-size:17px;">'+rowData.numPreHand+'</td>' +
             				'<td style="border:0;width:70px;text-align:right;font-size:16px;">库存：</td>' +
             				'<td style="border:0;width:20px;font-size:17px;">'+rowData.inventoryNums+'</td>' +
             				'<td style="border:0;width:80px;text-align:right;font-size:16px;">货号：</td>' +
             				'<td style="border:0;width:110px;font-size:17px;">'+rowData.productCode+'</td>' +                				
            				 '</tr><tr>'+
            				 '<td style="text-align:right;border:0;font-size:16px;">已配：</td>'+
            				 '<td style="border:0;text-align:right;"><button  class="button">'+rowData.nums+'</button></td>'+
            				 '<td style="text-align:center;border:0;"></td>'+
            				 '<td style="border:0;text-align:left;border:0;"></td>'+
            				 '<td style="text-align:right;border:0;"></td>' +
            				 '<td style="text-align:right;border:0;"></td>' +         				
            				 '</tr></table>';			 
		    },onExpandRow: function(index, row) {
		        if (!expandedRows.includes(index)) {
		            expandedRows.push(index); // 根据唯一标识记录展开行 ‌:ml-citation{ref="8" data="citationList"}
		        }
		        sessionStorage.removeItem("expandInfo");
		        sessionStorage.setItem("expandInfo",expandedRows);
		    },onCollapseRow: function(index, row) {
		        const idx = expandedRows.indexOf(index);
		        if (idx > -1) {
		            expandedRows.splice(idx, 1); // 移除已折叠行
		        }
		        sessionStorage.removeItem("expandInfo");
		        sessionStorage.setItem("expandInfo",expandedRows);
		    },onLoadSuccess: function(data) {
		    	var rows = $(this).datagrid('getRows');   
		    	let expandInfo = sessionStorage.getItem("expandInfo");
		    	if(expandInfo == null){
		    		for (var i = 0; i < rows.length; i++) {
			            $(this).datagrid('expandRow', i); // 逐行展开
			       }  
		    		 sessionStorage.setItem("expandInfo",expandedRows);
		    		 let expandInfo = sessionStorage.getItem("expandInfo");
		    	}else{
		    		const expandArray = expandInfo.split(',');
		    		for(let i = 0; i < expandArray.length; i++) {
		    	        $('#orderDetailsDatagrid').datagrid('expandRow',parseInt(expandArray[i]));
		    	      }
		    	}
		    	   		    		        
		    },
		    onDblClickRow: function(index, row) {
		    	console.log(row);
		    	const isExpanded = $(this).datagrid('getExpander', index).hasClass('datagrid-row-expand');
		    	if(isExpanded){
		    		$('#orderDetailsDatagrid').datagrid('expandRow', index);
		    		
		    	}else{
		    		$('#orderDetailsDatagrid').datagrid('collapseRow', index);
		    	}		    			    
		    }
	});
	
})


/**
 * @describe:添加配货数量
 *
 * @param:条码ID,选货数量,齐手数量
 */
function editQuantityPeihuo(pbId,snums,numPreHand,isInsert){
	 //单据id
	var orderId = $("#orderId").val();
	//配货数量
	var productNums = $("#productNums"+pbId).text();
	//是否齐手
	var check = $("#check"+pbId).prop('checked');
	var nums =0;
	if(check){//齐手
		if(isInsert){
			nums = parseInt(productNums) + numPreHand;
		}else{
			nums = parseInt(productNums) - numPreHand;
		}			
	}else{//单件
		if(isInsert){
			nums = parseInt(productNums) + 1;
		}else{
			nums = parseInt(productNums) - 1;
		}	
	}	

	var params = "formBean.orderId="+orderId+"&formBean.pbId="+pbId+"&formBean.quantity="+nums;
	$.post("ipadJSON!editInventoryById",params, updateOrderBKProcess,"json");				
		
}


// 回调方法中添加pbId(注意：pbId);
function updateOrderBKProcess(data){
    var response = data;
	var returnCode = response.returnCode;
	var pbId = response.returnValue.pbId;
	var nums = response.returnValue.quantityPeihuo;

	if (returnCode != SUCCESS)
	    $.messager.alert('配货提示', response.message, 'warning');
	else {
		//赋值配货数量
		$("#productNums"+pbId).text(nums);
		//刷新表单
		var orderId = $("#orderId").val();		
		$('#orderDetailsDatagrid').datagrid('reload', { 'formBean.orderId': orderId });
		//刷新配货页面
		window.location.href = '<%=request.getContextPath()%>/actionIpad/hqIpadJSP!enterNoEquippedDetails?formBean.orderId='+orderId;		
    }	
}


/**
 * 一键展开或折叠
 */
function oneKeyUnfoldOrFold(){
	// 获取完整数据对象（含分页信息）
	var data = $('#orderDetailsDatagrid').datagrid('getData');
	// 提取总条数
	var productNums = data.rows.length; 
	var isFold = $("#isFold").val();
	if(isFold == "0"){
		for(let i=0;i<productNums;i++){
			$('#orderDetailsDatagrid').datagrid('expandRow', i);
		}
		$("#isFold").val(1);
        sessionStorage.setItem("expandInfo",expandedRows);
	}else{
		for(let i=0;i<productNums;i++){
			$('#orderDetailsDatagrid').datagrid('collapseRow', i);
		}
		$("#isFold").val(0);
        sessionStorage.removeItem("expandInfo");
	}
	
}

/**
 * 展开记录展开行信息
 */
function expandInfo(){
	for(let i = 0; i < expandedRows.length; i++) {
        $('#orderDetailsDatagrid').datagrid('expandRow', expandedRows[i]);
      }
}

function goSearch(){
	 sessionStorage.removeItem("expandInfo");
	 window.location.href = '<%=request.getContextPath()%>/actionIpad/hqIpadJSP!goSearch';
}



</script>  
    

<body>
	<div class="easyui-navpanel">
		<header>
			<div class="m-toolbar">
				<div class="m-title">
					客户：
					<s:property value="formBean.ipadPdaVO.custName" />
				</div>
				<div class="m-left">
					<a onclick="goSearch();" href="javascript:void(0);"
						class="easyui-linkbutton m-back"><span>返回上一页</span></a>
				</div>
			</div>

		</header>
		<%@ include file="../component/CommonPanel.jsp"%>
		<div style="">
			<hr
				style="filter: progid:DXImageTransform.Microsoft.Shadow(color=#987cb9, direction=145, strength=15);">
			<span style="position: relative; top: -5px;">货品详情：</span>
			<div>

				<table id="orderDetailsDatagrid"
					data-options="rownumbers:true,singleSelect:true,
                autoRowHeight:false,pageSize:50"
					class="easyui-datagrid" style="height: 760px;">
					</tbody>
				</table>
			</div>
			<div style="display: none">
				<input id="orderId" type="hidden"
					value="<s:property value="formBean.ipadPdaVO.id"/>" /> <input
					id="isFold" type="hidden" value=1 />
			</div>
		</div>
	</div>
</body>

</html>